import { Dropdown, Button, Menu, message, Modal } from 'antd';
import { DownOutlined } from '@ant-design/icons';

export default ({ chapters, onClick, children }) => {
  const onMenuClick = (e) => {
    onClick(e.key);
  };
  const menu = (
    <Menu onClick={onMenuClick}>
      {/*{chapters && chapters.length && (*/}
      {/*  <Menu.SubMenu title="移至章节">*/}
      {/*    {chapters.map((chapter) => (*/}
      {/*      <Menu.Item key={chapter.id}>{chapter.title}</Menu.Item>*/}
      {/*    ))}*/}
      {/*  </Menu.SubMenu>*/}
      {/*)}*/}
      {chapters &&
        chapters.length &&
        chapters.map((chapter) => <Menu.Item key={chapter.cid}>{chapter.name}</Menu.Item>)}
    </Menu>
  );
  return chapters?.length ? (
    <Dropdown overlay={menu} placement="bottomLeft">
      {children || <span>移至其他章节</span>}
    </Dropdown>
  ) : null;
};
